/**
 * The examples provided by Facebook are for non-commercial testing and
 * evaluation purposes only.
 *
 * Facebook reserves all rights not expressly granted.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
 * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
 * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
 * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * @flow
 */
'use strict';
import React, { Component ,PropTypes} from 'react';
import {
    Image,
    ListView,
    TouchableHighlight,
    TouchableOpacity,
    StyleSheet,
    Text,
    Dimensions,
    View,
} from 'react-native';
let {width, height} = Dimensions.get('window');
import {data} from "./SimpleListScreen";

export default class GridLayoutScreen extends Component{

  // 构造
  constructor(props) {
    super(props);
    // 初始状态
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(data),
    };
  };
  render() {
    return (
        // ListView wraps ScrollView and so takes on its properties.
        // With that in mind you can use the ScrollView's contentContainerStyle prop to style the items.
          <ListView
              contentContainerStyle={styles.list}
              dataSource={this.state.dataSource}
              renderRow={this._renderRow}
          />
    );
  };

  _renderRow(rowData){
    return (
        <TouchableHighlight>
            <View style={styles.row}>
              <Text style={styles.text}>
                {rowData.title}
              </Text>
            </View>
        </TouchableHighlight>
    );
  }
}
var cols = 2;
var vMargin = 5;
var rowWidth=(width-5*(cols))/cols;

const styles = StyleSheet.create({
  list: {
    flexDirection:'row',
    flexWrap:'wrap',
  },
  row: {
    justifyContent: 'center',
    width: rowWidth,
    height: rowWidth,
    marginRight:vMargin,
    backgroundColor: 'red',
    alignItems: 'center',
    borderWidth: 1,
    borderRadius: 5,
    borderColor: '#CCC'
  },
  text: {
    fontWeight: 'bold'
  },
});